/**
 * Created by coder on 2018/5/14.
 */
import React,{Component} from 'react'
import {Form,Icon,Input,Button} from 'antd'
import './WtLogin.css'

//util
import WtHostPost from '../util/WtHostPost'
import WtNotification from '../util/WtNotification'
import WtGetQueryString from '../util/WtGetQueryString'
import WtLogger from '../util/WtLogger'
import WtDefaultHandlePostError from '../util/WtDefaultHandlePostError'

//const
const FormItem = Form.Item;

class WtForgotPasswordActiveForm extends Component{
	constructor(props){
		super(props);
		this.state = {
			confirmDirty: false,
		};
	}

	handleSubmit = (e) => {
		e.preventDefault();
		this.props.form.validateFields((err, values) => {
			if (!err) {
				WtLogger.log('Received values of form: ', values);
				const {onFinish} = this.props;
				if(onFinish){
					onFinish(values);
				}
			}
		});
	};

	handleConfirmBlur = (e) => {
		const value = e.target.value;
		this.setState({ confirmDirty: this.state.confirmDirty || !!value });
	};

	compareToFirstPassword = (rule, value, callback) => {
		const form = this.props.form;
		if (value && value !== form.getFieldValue('password')) {
			callback('两次输入的密码不一致!');
		} else {
			callback();
		}
	};

	validateToNextPassword = (rule, value, callback) => {
		const form = this.props.form;
		if (value && this.state.confirmDirty) {
			form.validateFields(['confirm'], { force: true });
		}
		callback();
	};

	render(){
		const {getFieldDecorator} = this.props.form;

		return (
			<Form onSubmit={this.handleSubmit} className="login-form">
				<FormItem>
					{getFieldDecorator('password', {
						rules: [{
							required: true, message: '请输入您的密码!',
						}, {
							validator: this.validateToNextPassword,
						}],
					})(
						<Input
							prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
							type="password"
							placeholder="密码"
						/>
					)}
				</FormItem>
				<FormItem>
					{getFieldDecorator('confirm', {
						rules: [{
							required: true, message: '请再次输入密码!',
						}, {
							validator: this.compareToFirstPassword,
						}],
					})(
						<Input
							prefix={<Icon type="lock"
							style={{ color: 'rgba(0,0,0,.25)' }} />}
							type="password"
							placeholder="再次输入密码"
						  onBlur={this.handleConfirmBlur}
						/>
					)}
				</FormItem>
				<FormItem>
					<Button loading={this.props.submitting} type="primary" htmlType="submit" className="login-form-button">提交</Button>
				</FormItem>
			</Form>
		);
	}
}

const WtForgotPasswordActiveFormWrapper = Form.create()(WtForgotPasswordActiveForm);

class WtForgotPasswordActive extends Component{
	constructor(props){
		super(props);
		this.state = {
			submitting:false,
		};
	}

	onFinish = (values) => {
		const {history} = this.props;
		this.setState({submitting:true});
		WtHostPost('/auth/resetActive',{
			email:WtGetQueryString(this.props.location.search,'email'),
			token:WtGetQueryString(this.props.location.search,'token'),
			password:values.password,
		}).then(({json,header}) => {
			if(json.code === 0){
				WtNotification.success('修改密码成功，现在可以登录');
				history.push('/login');
			} else {
				throw json;
			}
            this.setState({submitting:false});
		}).catch(error => {
			WtNotification.error('修改密码失败');
			WtDefaultHandlePostError(error);
            this.setState({submitting:false});
		});
	};

	render(){
		return (
			<div style={{height:'100%',background:'#e5e8e8'}}>
				<div style={{height:'100px'}}/>
				<div className="wt-login">
					<div className="nav-logo" onClick={() => this.props.history.push('/')}/>
					<h3 className="title">修改密码</h3>
					<WtForgotPasswordActiveFormWrapper
						onFinish={this.onFinish}
						submitting={this.state.submitting}
					/>
				</div>
			</div>
		);
	}
}

export default WtForgotPasswordActive;